<template>
  <div>
    <div class="father">
      <div class="fater-title">
        <h1>我是父组件</h1>
      </div>
      <div class="fater-title">
        <h3>我是子组件传递过来的值:</h3>
        <h3>{{fatherValue}}</h3>
      </div>
    </div>
    <div class="child">
      <my-child-two @handClick="handClick"></my-child-two>
    </div>
  </div>
</template>

<script>
import MyChildTwo from "./../ChildCompoment/MyChildTwo";
export default {
  name: "MyFatherTwo",
  data() {
    return {
      fatherValue: ""
    };
  },
  components: { MyChildTwo },
  methods: {
    handClick: function(param) {
      this.fatherValue = param;
    }
  }
};
</script>

<style scoped>
.father {
  height: 200px;
  border: solid 1px gray;
  padding: 20px;
}
.child {
  margin: 20px 0 0 0;
  height: 200px;
  border: solid 1px black;
  padding: 20px;
}
.fater-title {
  text-align: center;
}
.h3 {
  text-align: center;
}
</style>